﻿@{
    ViewBag.Title = "Home Page";
    Layout = "";
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>新增模板_问卷调查</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/vue.js"></script>
    <link href="~/Scripts/index.css" rel="stylesheet" />
  

</head>
<body>
    <script type="text/x-template" id="in-radio">
        <div class="panel-body radio-body col-xs-1" v-bind:ptype="ptype">
            <div class="body-row">
                <span class="num">{{OrderNum}}</span>
                <div class="rowCont">
                    <span><i v-if="IsRequired">*</i>{{QuestionTitle}}</span>
                    <p v-for="item in QuestionItem">
                        <input type="radio" value="item.Content" name="radio">
                        <label>{{item.Content}}</label>
                    </p>
                </div>
            </div>
            <div class="body-btn">
                <input type="button" class="edit btn" value="编辑">
                <input type="button" class="delete btn" value="删除">
            </div>
            <div class="body-conent">
                <div class="col-sm-1 col">
                    <label for="">标题</label>
                    <input type="text" class="tInput" v-model="QuestionTitle">
                    <input type="checkbox" class="ischeck" v-model="IsRequired">
                    <label for="" class="checkLabel">是否必填</label>
                </div>
                <table>
                    <thead><tr><th>选项</th><th>操作</th></tr></thead>
                    <tbody>
                        <tr v-for="(item,index) in QuestionItem">
                            <td><input type="text" class="tInput" v-model="item.Content"></td>
                            <td class="trBtn">
                                <input type="button" class="add btn" value="新增" v-on:click="QuestionItem.splice(index+1,0,{Content:''})">
                                <input type="button" class="delete btn" value="删除" v-on:click="QuestionItem.splice(index,1)">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </script>
    <script type="text/x-template" id="in-checkbox">
        <div class="panel-body checkboxlist-body col-xs-1" v-bind:ptype="ptype">
            <div class="body-row">
                <span class="num">{{OrderNum}}</span>
                <div class="rowCont">
                    <span><i v-if="IsRequired">*</i>{{QuestionTitle}}</span>
                    <p v-for="item in QuestionItem">
                        <input type="checkbox" value="item.Content" name="checkbox">
                        <label>{{item.Content}}</label>
                    </p>
                </div>
            </div>
            <div class="body-btn">
                <input type="button" class="edit btn" value="编辑">
                <input type="button" class="delete btn" value="删除">
            </div>
            <div class="body-conent">
                <div class="col-sm-1 col">
                    <label for="">标题</label><input type="text" class="tInput" v-model="QuestionTitle">
                    <input type="checkbox" class="ischeck" v-model="IsRequired">
                    <label for="" class="checkLabel">是否必填</label>
                </div>
                <table>
                    <thead><tr><th>选项</th><th>操作</th></tr></thead>
                    <tbody>
                        <tr v-for="(item,index) in QuestionItem">
                            <td><input type="text" class="tInput" v-model="item.Content"></td>
                            <td class="trBtn">
                                <input type="button" class="add btn" value="新增" v-on:click="QuestionItem.splice(index+1,0,{Content:''})">
                                <input type="button" class="delete btn" value="删除" v-on:click="QuestionItem.splice(index,1)">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </script>
    <script type="text/x-template" id="in-text">
        <div class="panel-body text-body" v-bind:ptype="ptype">
            <div class="body-row">
                <span class="num">{{OrderNum}}</span>
                <div class="rowCont">
                    <span v-if="IsRequired"><i>*</i>{{QuestionTitle}}</span>
                    <input type="text" value="">
                </div>
            </div>
            <div class="body-btn">
                <input type="button" class="edit btn" value="编辑">
                <input type="button" class="delete btn" value="删除">
            </div>
            <div class="body-conent">
                <div class="col-sm-1 col">
                    <label for="">标题</label>
                    <input type="text" class="tInput" v-model="QuestionTitle">
                    <input type="checkbox" class="ischeck" v-model="IsRequired">
                    <label for="" class="checkLabel">是否必填</label>
                </div>
            </div>
        </div>
    </script>
    <div class="main">
        <div class="both" id="tem-info">
            <div class="tem-info-container">
                <span class="panel-heading">模板信息</span>
                <div class="tem-info">
                    <div class="body-conent">
                        <div class="tem-info-col">
                            <label for=""><span style="color: #FF0000">*</span>模板名称</label>
                            <input type="text" class="tInput" v-model="quesTitle" id="TemName" />
                        </div>
                        <div class="tem-info-col">
                            <label for="">描述</label>
                            <textarea class="tInput" v-model="desc" id="TemDesc" rows="3" style="height:auto; font-size:12px;line-height: 1.5"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <span class="panel-heading">模板配置</span>
                <div class="all-result">
                    <div v-bind:is="item.component" v-bind:test="item.cIndex" v-for="(item,index) in itemTemplate"></div>
                </div>
                <div class="form-group">
                    <p id="msginfo" class="alert-info"></p>
                    <input type="button" class="btn-save" value="保存" />
                </div>
            </div>
            <div class="toolBarDiv">
                <span class="panel-heading">控件箱</span>
                <ul class="tooList">
                    <li id="drag_text" addType="input-text"><b></b>文本框</li>
                    <li id="drag_radio" addType="input-radio"><b></b>单选</li>
                    <li id="drag_checkboxlist" addType="input-checkbox"><b></b>多选</li>
                </ul>
            </div>
        </div>

    </div>
    
    
    
    <script src="~/Scripts/main.js"></script>
    <script type="text/javascript">

        function sendData() {

            ajaxData.title = vm.quesTitle;
            ajaxData.content = [];
            var a = [];
            for (var i = 0; i < $('.panel-body').length; i++) {
                var ele = $('.panel-body').eq(i);
                var item = {};
                item.Answer = null;
                item.Question = {};
                item.Question.IsRequired = ele.find(".ischeck").prop("checked");
                item.Question.OrderNum = ele.find(".num").text();
                item.Question.QuestionTitle = ele.find(".tInput").val().trim();
                item.Question.Type = ele.attr("ptype");
                if (item.Question.Type == 99) {
                    item.Question.QuestionItem = null;
                } else {
                    item.Question.QuestionItem = [];
                    for (var j = 0; j < ele.find(".rowCont p").length; j++) {
                        var itemCon = {};
                        itemCon.Content = ele.find(".rowCont p").eq(j).find('label').text();
                        itemCon.ItemNo = j + 1;
                        itemCon.OrderNum = j + 1;
                        item.Question.QuestionItem.push(itemCon);
                    }
                }

                a.push(item);
            }
            ajaxData.content = JSON.stringify(a);
            console.log(ajaxData);
            var url = "@Url.Content("~/Home/Insertdata")";
            $.ajax({
                url: url,
                dataType: "json",
                data: ajaxData,
                async: true,
                type: "post",
                timeout: 15000,
                beforeSend: function () {
                    //showLoading();
                },
                success: function (data) {
                },
                complete: function (XMLHttpRequest, status) {
                    if (status == 'timeout') {
                        console.log('请求超时')
                    }
                    //hideLoading()
                }
            });
        }
       

    </script>
</body>
</html>

